<template>
  <div class="custom-wrap office-wrap">
    <div class="header" style="height: 100px; background:#E2E6ED;position:relative">
        <div style="color: #000;font-size: 28px;margin-bottom:15px;">广东省税务局机关办公用房申请表</div>
        <!-- <div style="position:absolute;right: 20px;bottom: 5px;">
            <span>申请人： {{userInfo.realname}}</span><span style="margin-left: 25px">申请人时间：{{date}}</span>
        </div> -->
        <!-- <el-button type="text" icon="el-icon-printer" class="new-print-btn noprint" v-print="printObj"></el-button> -->
        <el-button type="text" icon="el-icon-printer" class="new-print-btn noprint" v-print="printObj">打印</el-button>
        <!-- <el-button type="primary" style="position:absolute;right: 10px;" icon="el-icon-printer" class="noprint" v-print="printObj">打印</el-button> -->
    </div>
    <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="120px">
        <div class="disable-block" v-if="detailObj && detailObj.status"></div>
        <el-row type="flex" align="center">
            <el-col :span="2">
                <div style="height: 100%;display:flex;
                align-items:center;text-align:center;font-size: 16px;">申请人基本情况</div>
            </el-col>
            <el-col class="no-border" :span="22">
               <el-row>
                    <el-col :span="12">
                        <el-form-item label="申请人">
                            {{detailObj && detailObj.applyRealname || userInfo.realname}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="申请部门">
                            {{detailObj && detailObj.applyDeptName || userInfo.deptName}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="职务">
                            {{getPostName(detailObj && detailObj.applyPost || userInfo.post)}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="级别">
                            {{getPostRankName(detailObj && detailObj.applyPostRank || userInfo.postRank)}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="申请时间">
                            {{detailObj && detailObj.applyDate || date}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系电话">
                            {{detailObj && detailObj.applyPhone || userInfo.phone}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                   <el-col :span="12">
                        <el-form-item label="人员类别" prop="applyType">
                            <el-select v-model="ruleForm.applyType"
                                    placeholder="请选择人员类别"
                                    clearable>
                                <el-option v-for="item in optionRylb"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="办公室使用类型" prop="useType">
                            <el-select v-model="ruleForm.useType"
                                    placeholder="请选择办公室使用类型"
                                    clearable>
                                <el-option v-for="item in optionSylx"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="使用时间" prop="useDates">
                            <el-date-picker
                                v-model="ruleForm.useDates"
                                type="daterange"
                                :disabled="(detailObj ? true: false) && !bjFlag"
                                placeholder="请选择居住期限"
                                range-separator="至"
                                value-format="yyyy-MM-dd"
                                format="yyyy年MM月dd日"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item prop="reason">
                            <label for="reason" slot="label" style="display: inline-block;height: 100px;line-height:100px;">申请原因</label>
                            <el-input type="textarea" style="height: 100px" :row="4" v-model="ruleForm.reason" :disabled="(detailObj ? true: false)" :maxlength="200"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <el-row align="center">
          <el-col :span="24">
            <el-form-item label-width="199px">
                <label label-width for="reason" slot="label" style="display: inline-block;height: 100px;line-height:100px;">申请部门意见</label>
                <div class="flex-block">{{sqbmyj}}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row align="center">
          <el-col :span="24">
            <el-form-item label-width="199px">
                <label label-width for="reason" slot="label" style="display: inline-block;height: 100px;line-height:100px;">物业办公房管理领导意见</label>
                <div class="flex-block">{{wyldyj}}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" align="center">
            <el-col :span="2">
                <div style="height: 100%;display:flex;
                align-items:center;text-align:center;font-size: 16px;">服务中心填写</div>
            </el-col>
            <el-col class="no-border" :span="22">
                <el-row>
                    <!-- <el-col :span="3">
                      <div style="height: 100%;display:flex;align-items:center;text-align:center;font-size: 16px;">拟安排房屋情况</div>
                    </el-col> -->
                    <el-form-item label-width="121px">
                      <label slot="label" style="width: 100%;display: inline-block;height: 154px;line-height:154px;border-left: 1px solid #000;border-top: 1px solid #000;">拟安排房屋情况</label>
                      <el-col :span="24">
                        <el-row>
                          <el-col :span="24">
                            <el-form-item label="地址">
                                <el-input disabled :style="{width: form1 && form1.housingType == '2' ? '420px': '100%'}" v-model="form1 && form1.address">
                                  <el-button style="color: #fff;background:#409EFF;border-color: #409EFF;" slot="append" @click="choseHouse">选择办公用房</el-button>
                              </el-input>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="12">
                            <el-form-item label="房号">
                              <span>{{form1 && form1.roomNumber}}</span>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12" class="borderLeft">
                            <el-form-item label="房间面积（m²）">
                                <span>{{form1 && form1.roomArea}}</span>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="24">
                            <el-form-item label="办公室类型">
                                <el-select v-model="form1 && form1.roomType"
                                        placeholder="请选择办公室类型"
                                        disabled
                                        clearable>
                                    <el-option v-for="item in optionBgslx"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                          </el-col>
                        </el-row>
                      </el-col>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-col :span="24">
                      <el-form-item label-width="120px">
                          <label label-width for="reason" slot="label" style="display: inline-block;height: 100px;">物业办公房管理经办人意见</label>
                          <div class="flex-block">{{wyjbryj}}</div>
                      </el-form-item>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <el-row align="center">
          <el-col :span="24">
            <el-form-item label-width="199px" label="交付使用时间">
                <el-date-picker
                    :disabled="!bjFlag"
                    v-model="form1 && form1.leadDate"
                    type="date"
                    placeholder="请选择交付使用时间"
                    value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row align="center">
          <el-col :span="24">
            <el-form-item label-width="199px">
                <label label-width for="remark" slot="label" style="display: inline-block;height: 100px;line-height:100px;">办理情况</label>
                <el-input type="textarea" :disabled="!bjFlag" style="height: 100px" :row="4" v-model="form1 && form1.remark" :maxlength="200"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row align="center" v-if="!detailObj">
          <el-col :span="24" class="btn-group-col noprint">
            <el-form-item>
              <el-button type="primary" icon="el-icon-check" @click="submitForm('ruleForm')">提交</el-button>
              <el-button  icon="el-icon-delete" @click="close">关闭</el-button>
            </el-form-item>
          </el-col>
        </el-row>
    </el-form>
    <el-dialog
            :visible.sync="modalHouse1"
            v-if="modalHouse1"
            title="公有住房"
            width="1200px"
            top="2vh"
             @close="close1"
            :close-on-click-modal="false"
            append-to-body>
            <a-table 
                :row-key="'officeId'"
                :columns="columns2"
                :scroll="{ y: 'calc(100vh - 364px)' }"
                :data-source="allmemberList1"
                :row-selection="{selectedRowKeys: selectedRowKeys1, type: 'radio', onChange: selectMembers1,columnTitle:' '}"
                bordered
                :pagination="page2"
                :loading="loading1"
                @change="handleTableChange1">
                 <template slot="roomType" slot-scope="text,record">
                    <span>
                    {{ record.housingTypeName }}
                    </span>
                </template>
                <template slot="structure" slot-scope="text,record">
                    <span>
                    {{ record.strueName }}
                    </span>
                </template>
                <template slot="status" slot-scope="text,record">
                    <span>
                    {{ record.statusName }}
                    </span>
                </template>
             </a-table>
            <div class="btn-footer">
                <el-button type="primary" @click="dataSubmit">确 定</el-button>
                <el-button @click="close1">取 消</el-button>
            </div>
        </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
import {getCurrentDate} from '@/util/date'
import {tableOption} from '@/const/crud/housing/housing'
import {fetchList} from '@/api/housing/housingbed'
import {fetchList as fetchList1} from '@/api/property/propertyoffice'
import { fetchList as fetchList2 } from '@/api/admin/sysposition'
import {mapGetters} from 'vuex'
import {findByvalue} from '@/util/util'
import chooseMember from '@/components/chooseMember'
import {startProcess} from '@/api/bill'
import { remote } from "@/api/admin/dict";
export default {
  components: { chooseMember },
  props: ['formObj', 'detailObj', 'form1'],
  data () {
    return {
      date: getCurrentDate(),
      printObj: {
        id: "printForm",//打印区域 Dom ID
        popTitle: '打印页面标题文字',
        ignoreClass: 'noprint',
        extraCss: 'https://www.google.com,https://www.google.com',
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>,<style> #printForm { height: auto !important; } <style>'  ,//  可以传进去  style tag 标签；注意要逗号分隔   解决特定区域不显示问题；
      },
      ruleForm: {
        applyDate: getCurrentDate('year'),
        useType: '',
        applyPost: '',
        applyPostRank: '',
        applyType: '',
        reason: '',
        useDates: '',
      },
      flKey: '',
      url1: '',
      url2: '',
      type:'',
      columns:[],
      columns1:[],
      title1: '',
      labelkey: '',
      showChose: false,
      // form1: {},
      form2: {},
      bjFlag: false,
      option: tableOption,
      page1: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 20, // 每页显示多少条,
          isAsc: false// 是否倒序
      },
      page2: {
          total: 0, // 总页数
          current: 1, // 当前页数
          pageSize: 20, // 每页显示多少条,
          isAsc: false// 是否倒序
      },
      permissionList1:{
          delBtn: false,
          addBtn: false,
          editBtn: false
      },
      loading1: false,
      selectedRowKeys1: [],
      allmemberList1: [],
      chosememberList1: [],
      columns2: [
          {
          "title": "地址",
          "dataIndex": "address",
          "key": "address",
          width: 300,
          },	  {
          "title": "房号",
          "dataIndex": "roomNumber",
          "key": "roomNumber",
          },	  {
          "title": "房屋类型",
          "dataIndex": "roomType",
          "key": "roomType",
          scopedSlots: { customRender: 'roomType' },
          },	  {
          "title": "室内结构",
          "dataIndex": "structure",
          scopedSlots: { customRender: 'structure' },
          "key": "structure",
          },	  {
          "title": "房间面积",
          "dataIndex": "roomArea",
          "key": "roomArea",
          },	  {
          "title": "使用状态",
          "dataIndex": "status",
          scopedSlots: { customRender: 'status' },
          "key": "status"
      }  ],
      listLoading: true,
      list: [],
      modalHouse: false,
      modalHouse1: false,
      rules: {
        applyType: [
          { required: true, message: '请选择人员类别' }
        ],
        useType: [
          { required: true, message: '请选择办公室使用类型' }
        ],
        useDates: [
          { required: true, message: '请选择使用时间' }
        ],
        reason: [
          { required: true, message: '请填写申请原因' }
        ]
      },
      sqbmyj: '',
      wyldyj: '',
      wyjbryj: '',
      optionRylb:[],
      optionsJb: [],
      optionsZw: [],
      optionsHyzk: [],
      optionSylx:[],
      optionBgslx: [],
      optionsBed: [],
      optionsHouse: [],
      optionStru: [],
      optionsTowa: [],
      optionsStatus: [],
      optionsHouseType: []
    }
  },
  computed: {
      ...mapGetters(['userInfo']),
  },
  created() {
    if (this.detailObj && this.detailObj.status) {
      this.ruleForm = this.detailObj
      this.$set(this.ruleForm, 'useDates', [this.detailObj.startDate, this.detailObj.endDate])
      let keyword
      this.detailObj.commitList.map(citem => {
        if(citem.taskStatus === '1') {
          if (citem.taskName === '申请部门意见') {
            keyword = 'sqbmyj'
          } else if (citem.taskName === '物业办公房管理领导意见') {
            keyword = 'wyldyj'
          } else if (citem.taskName === '物业办公房管理经办人意见') {
            keyword = 'wyjbryj'
          } else {
            keyword = 'bj'
          }
          this[keyword] = '【' + citem.deptName + '-' + citem.realname + '】:' + (citem.message ? citem.message : '') + '。（' + citem.time + '）'
        }
      })
      // 办结节点
      if (this.detailObj.canTodo && this.detailObj.taskConfig && this.detailObj.taskConfig.properties) {
        this.bjFlag = true
      }
      //办结结束
      if(this.detailObj.status === '2') {
        this.form1 = Object.assign(this.form1, this.detailObj)
      }
    }
    this.init()
  },
  methods: {
    choseHouse() {
      if (this.bjFlag) {
        this.getmemberList(this.page2)
        this.modalHouse1 = true
      }
    },
    selectMembers1(selectedRowKeys, selectedRows) {
        this.selectedRowKeys1 = selectedRowKeys
        this.chosememberList1 = selectedRows
    },
    handleTableChange1(pagination, filters, sorter) {
        this.page2.current = pagination.current
        this.getmemberList(this.page2)
    },
    dataSubmit() {
      if (this.chosememberList1.length > 0 ){
          this.form1.officeId = this.chosememberList1[0].officeId
          this.form1.address = this.chosememberList1[0].address
          this.form1.roomNumber = this.chosememberList1[0].roomNumber
          this.form1.roomType = this.chosememberList1[0].roomType
          this.form1.roomArea = this.chosememberList1[0].roomArea
          this.form1.useType = this.chosememberList1[0].useType
      }
      this.close1()
    },
    close() {
      this.$emit('getItemModal', false)
    },
    close1() {
        this.selectedRowKeys1 = []
        this.chosememberList1 = []
        this.modalHouse1 = false
    },
    showHouse() {
      this.modalHouse = true
    },
    init() {
      remote('personnel_type').then(response => {
        this.optionRylb = response.data.data
      })
      remote('office_use_type').then(response => {
        this.optionSylx = response.data.data
      })
      remote('office_type').then(response => {
        this.optionBgslx = response.data.data
      })
      remote('housing_structure').then(response => {
          this.optionStru = response.data.data
      })
      remote('post_level').then(response => {
        this.optionsJb = response.data.data
      })
      remote('housing_use_status').then(response => {
          this.optionsStatus = response.data.data
      })
      fetchList2({current: 1, size:1000}).then(response => {
          this.optionsZw = response.data.data.records
      })
    },
    getPostName(id) {
      let list = this.optionsZw.filter(item => {
        return item.id === id
      })
      return list.length > 0 ? list[0].name : ''
    },
    getPostRankName(id) {
      let list = this.optionsJb.filter(item => {
        return item.value === id
      })
      return list.length > 0 ? list[0].label : ''
    },
    getmemberList(page, params) {
        fetchList1(Object.assign({
            current: page.current,
            size: page.pageSize,
            status: '0'
        }, params)).then(response => {
            response.data.data.records.map(item => {
                item.housingTypeName = findByvalue(this.optionBgslx, item.roomType)
                item.strueName = findByvalue(this.optionStru, item.structure)
                item.towaName = findByvalue(this.optionsTowa, item.toward)
                item.statusName = findByvalue(this.optionsStatus, item.status)
            })
            this.allmemberList1 = response.data.data.records
            this.page2.total = response.data.data.total
        })
    },
    submitForm(formName) {
      let _this = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('确定提交?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            _this.ruleForm.applyPost = _this.userInfo.post
            _this.ruleForm.applyPostRank = _this.userInfo.postRank
            _this.ruleForm.applyDate = _this.date
            _this.formObj.bizData = _this.ruleForm
            startProcess(_this.formObj).then(response => {
              this.$message.success('提交成功')
              this.close()
            })
          })
        }
      });
    },
    getList1(page, params) {
        this.listLoading = true
        fetchList1(Object.assign({
            current: page.currentPage,
            size: page.pageSize
        }, params, this.searchForm1)).then(response => {
            this.list = response.data.data.records
            this.page1.total = response.data.data.total
            this.listLoading = false
        })
    },
    searchChange1(param, done) {
        this.searchForm1 = param
        this.page1.currentPage = 1
        this.getList1(this.page1, param)
        done()
    },
    sizeChange1(pageSize) {
        this.page1.pageSize = pageSize
    },
    currentChange1(current) {
        this.page1.currentPage = current
    },
    refreshChange1() {
        this.getList1(this.page1)
    },
  }
}
</script>
<style lang="scss">
.office-wrap{
  .el-form-item__content {
    text-align: center;
  }
}
.btn-group-col{
  .el-form-item__content{
    text-align: center;
  }
}
.render-form .jb-form-item .el-form-item__content .el-form-item__error{
  right: 155px;
}
.render-form .xm-form-item .el-form-item__content .el-form-item__error{
  right: 75px;
}
.render-form .xb-form-item .el-form-item__content .el-form-item__error{
  right: 15px;
}
.xm-form-item{
  .el-radio{
    margin-right: 10px;
  }
}
.flex-block{
  display: flex;
  justify-content: center;
  align-items: center;
}
.office-wrap{
  .el-form{
    position: relative;
    .disable-block{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      opacity: 0;
      height: 205px;
      z-index: 1;
      cursor: not-allowed;
    }
  }
}

.btn-footer{
    text-align: center;
}
</style>

